<script setup lang="ts">
import { VisSingleContainer, VisDonut } from '@unovis/vue';

interface Props {
  used?: number;
  remaining?: number;
  centralLabel?: string;
  centralSubLabel?: string;
  colors?: [string, string];
}

const {
  used = 0,
  remaining = 100,
  centralLabel = 'Usage',
  centralSubLabel = '0/100',
  colors = ['#1e90ff', '#d3d3d3']
} = defineProps<Props>();

const data = computed(() => [used, remaining]);

const color = (d: number, index: number) => colors[index];
</script>

<template>
  <div class="p-5">
    <VisSingleContainer :data="data" :height="250">
      <VisDonut
        :value="(d: number) => d"
        :color="color"
        :central-label="centralLabel"
        :central-sub-label="centralSubLabel"
        :arc-width="40"
      />
    </VisSingleContainer>
  </div>
</template>
